import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';

import '../basic/base_info.dart';
import '../config/const.dart';
import '../moudle/common_info.dart';
import '../page/home/home.dart';

class TopDeviceSelect extends StatefulWidget {
  final Function callBack;
  const TopDeviceSelect({super.key, required this.callBack});

  @override
  State<TopDeviceSelect> createState() => _TopDeviceSelectState();
}

class _TopDeviceSelectState extends State<TopDeviceSelect> {

  int selIndex = 0;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    getDevicesList((){
      if(mounted){
        setState(() {});
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          color: Color(0xff1E1D20)
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          SizedBox(height: ScreenUtil().statusBarHeight+0.w,),
          _topWidget(isClick: false),
          SizedBox(height: 10.w,),
          Container(
            color: Colors.transparent,
            height: baseDevices.isEmpty?0: baseDevices.length>3? 192.w * 3:200.w * baseDevices.length,
            child: ListView.builder(itemBuilder: (ctx,index){
              Map device = baseDevices[index];
              return GestureDetector(
                onTap: (){
                  setState(() {
                    selIndex = index;
                  });
                  if(baseDeviceNum != device['sn']){
                    LocalBaseInfo.setDeviceNum(device['sn']);
                    baseDeviceNum = device['sn'];
                    baseDevice = device;
                  }
                  SmartDialog.dismiss();
                  if(widget.callBack!=null){
                    widget.callBack(0);
                  }
                },
                child: Container(
                  padding: EdgeInsets.symmetric(horizontal: 30.w),
                  height: 192.w,
                  decoration: BoxDecoration(
                    color: selIndex == index?Color.fromRGBO(255, 255, 255, 0.1): Color(0xff1E1D20),
                  ),
                  child: Column(
                    children: [
                      Expanded(child: Row(
                        children: [
                          Expanded(child: Container(
                            child: Column(
                              children: [
                                Text(device['name']?? device['sn']??'',style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 32.sp,
                                    fontWeight: FontWeight.w600
                                ),),
                                SizedBox(height: 10.w,),
                                Text(device['sn']??'',style: TextStyle(
                                    color: Color.fromRGBO(255, 255, 255, 0.5),
                                    fontSize: 24.sp,
                                    fontWeight: FontWeight.w400
                                ),)
                              ],
                              mainAxisAlignment: MainAxisAlignment.center,
                              crossAxisAlignment: CrossAxisAlignment.start,
                            ),
                          )),
                          SizedBox(width: 24.w,),
                          Image.asset('assets/common/top_device_logo.png',width: 84.w,)
                        ],
                      )),
                      Container(
                        height: 1.w,
                        decoration: BoxDecoration(
                          color: Color.fromRGBO(255, 255, 255, 0.1)
                        ),
                      )
                    ],
                  ),
                ),
              );
            },padding: EdgeInsets.zero,itemCount: baseDevices.length,),
          ),
          GestureDetector(
            onTap: (){
              SmartDialog.dismiss().then((_){
                if(widget.callBack!=null){
                  widget.callBack(1);
                }
              });
            },
            child: Container(
              height: 120.w,
              padding: EdgeInsets.symmetric(horizontal: 40.w),
              alignment: Alignment.center,
              child: Row(
                children: [
                  Image.asset('assets/common/top_add_device.png',width: 40.w,),
                  SizedBox(width: 20.w,),
                  Text('Add Product',style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.w600,
                      fontSize: 24.sp
                  ))
                ],
              ),
            ),
          ),
          Container(
            height: 40.w,
            padding: EdgeInsets.symmetric(horizontal: 40.w),
            alignment: Alignment.center,
            child: Container(
              width: 170.w,
              height: 8.w,
              decoration: BoxDecoration(
                  color: Color.fromRGBO(255, 255, 255, 0.1),
                  borderRadius: BorderRadius.circular(8.w)
              ),
            ),
          )
        ],
      ),
    );
  }

  Widget _topWidget({bool isClick = true}){
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 30.w),
      height: 44,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          GestureDetector(
            onTap: (){
            },
            child: Row(
              children: [
                // Container(
                //   child: Image.asset('assets/home/home_person.png',width: 64.w,),
                // ),
                // SizedBox(width: 20.w,),
                Visibility(visible: true,child: Container(
                  constraints: BoxConstraints(
                      maxWidth: 260.w
                  ),
                  child: Text(baseUserInfo['firstName']!=null? baseUserInfo['firstName']:baseUserInfo['nickname']??'user',style: TextStyle(
                      color: whiteFontColor,
                      fontSize: 40.sp,
                      fontWeight: FontWeight.w600
                  ),maxLines: 1,overflow: TextOverflow.ellipsis,),
                ),),
                SizedBox(width: 6.w,),
                Image.asset('assets/common/control_down.png',width: 48.w,)
              ],
            ),
          ),
          Visibility(child: Container(
            child: Text(cndcValue.isNotEmpty && double.parse('${cndcValue ?? '0'}') <0?'Discharging': cndcValue.isNotEmpty && double.parse('${cndcValue ?? '0'}') >0?'Charging':'Ready',style: TextStyle(
                color:cndcValue.isNotEmpty && double.parse('${cndcValue ?? '0'}') <0? themeColor : Color(0xff06df85),
                fontSize: 28.sp,
                fontWeight: FontWeight.w600
            ),maxLines: 1,overflow: TextOverflow.ellipsis,),
          ),visible: baseDevice != null && baseDevice?['status'].toString() != '2',),
          // Container(
          //   child: Image.asset('assets/home/home_logo.png',height: 40.w,),
          // )
          // GestureDetector(
          //   onTap: (){
          //     JhPickerTool.showStringPicker(context,
          //         data: _list,
          //         clickCallBack: _selectType,
          //         normalIndex: 0);
          //   },
          //   child: Row(
          //     children: [
          //       SizedBox(width: 20.w,),
          //       Text(home_page_change_device_text.tr,style: TextStyle(
          //           color: fontColor
          //       ),)
          //     ],
          //   ),
          // ),
        ],
      ),
    );
  }

}
